<ion-header>
  <ion-toolbar>
    <img class="back_img" src="..\assets\img\返回.png" slot="start" (click)="goBack()">
    <ion-title>通讯录</ion-title>
  </ion-toolbar>
  <!-- 搜索框 -->
  <ion-toolbar style="margin-top: 1rem;">
    <ion-searchbar [(ngModel)]="searchInput" placeholder="请输入搜索姓名" (ionBlur)="blurInput()">
    </ion-searchbar>
    <ion-buttons slot="end">
      <ion-button (click)="goSearchResult()" color="dark">搜索</ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>
<ion-content>
  <!-- 在页面的右侧按顺序显示姓名存在的首字母 -->
  <div >
    <div id="letter">
      <p class="indexed-item" [class.activate]="letter === index" *ngFor="let letter of letters;let i = index"
        (click)="selectIndex(letter)">{{letter}}</p>
      <!-- 判断是否存在#，有的话显示# -->
      <p class="indexed-item" *ngIf="isqita">#</p>  
    </div>
    <!-- 点击右侧检索时页面中间临时显示点击的字母 -->
    <div class="modal" [class.show]="showModal">
        {{index}}
    </div>
  </div>
  <ion-list >
    <p *ngIf="isSearching">&nbsp;&nbsp;&nbsp;&nbsp;最佳匹配</p>
    <ion-item-group *ngFor="let item of formatContacts;let i = index">
      <!-- 遍历字母，显示通讯录中存在名字首字母为改字母的字母 -->
      <ion-item-divider color="light" id="{{ aLetters[i] }}" *ngIf="item.length>0">
        {{aLetters[i]}}
      </ion-item-divider>
      <ion-item *ngFor="let contact of item" (tap)="sendemail(contact.id)">
        <section>{{contact.name }}</section>
      </ion-item>
    </ion-item-group>
  </ion-list>
</ion-content>